<template>
  <MainHeader
    title="阿健(Finley) 的博客"
    description="精通HTML, CSS, JS, Vuejs, Reactjs, Nodejs等单词拼写"
    bgUrl="https://jiangeges.oss-cn-heyuan.aliyuncs.com/static/main_header.webp"
  >
  </MainHeader>
  <div class="main-blog">
    <el-row :align="'top'" class="mobile-header">
      <el-col>
        <el-card class="mobile-introduce">
          <img style="width: 100%" alt="" :src="rightBackgroundUrl" />
          <div>
            <p class="introduce-title">web知识分享</p>
            <div class="count-classify">
              <div>
                <p>文章</p>
                <span>{{ total }}</span>
              </div>
              <div>
                <p @click="router.push('category')">分类</p>
                <span>{{ categoryNum }}</span>
              </div>
              <div>
                <p @click="router.push('category')">标签</p>
                <span>{{ tagNum }}</span>
              </div>
            </div>
            <Connect />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="main-blog-row" :gutter="10">
      <el-col class="left-col" :xs="24" :sm="18">
        <div
          class="article-detail"
          v-for="art in list"
          :key="art.id"
          @click="toArticalDetail(art)"
        >
          <img class="article-detail-left" :src="art.article_cover" alt="" />
          <div class="article-detail-right">
            <h1>{{ art.article_title }}</h1>
            <div>
              <span
                ><el-icon color="#05b5fa"><Edit /></el-icon
                >&nbsp;发表于:&nbsp;{{ art.createDate }}</span
              >
              <span
                ><el-icon color="#05b5fa"><Calendar /></el-icon
                >&nbsp;更新于:&nbsp;{{ art.updateDate }}</span
              >
              <span
                ><el-icon color="#05b5fa"><Grid /></el-icon>&nbsp;分类:&nbsp;{{
                  art.categoryName
                }}&nbsp;&nbsp;
                <img
                  width="14"
                  height="14"
                  src="../../assets/svg/tag.svg"
                  alt="点赞"
                />&nbsp;标签:&nbsp;{{ art.tagNameList }}</span
              >
              <span
                ><img
                  width="14"
                  height="14"
                  src="../../assets/svg/heart.svg"
                  alt="点赞" />&nbsp;点赞: {{ art.thumbs_up_times }}&nbsp;&nbsp;
                <el-icon color="#05b5fa"><StarFilled /></el-icon>&nbsp;收藏:
                {{ art.star_times }}&nbsp;&nbsp;<el-icon color="#05b5fa"
                  ><Comment /></el-icon
                >&nbsp;评论:&nbsp;{{ art.comment_times }}&nbsp;&nbsp;<el-icon
                  color="red"
                  style="cursor: pointer"
                  @click="deleteClick(art.id)"
                  v-if="getUserInfo?.id === art.userId"
                  ><Delete /></el-icon
              ></span>
            </div>
            <p>{{ art.article_description }}</p>
          </div>
        </div>
        <Pagination
          v-show="total && total > size"
          :size="size"
          :current="current"
          :layout="layout"
          :total="total"
          @pagination="pagination"
        />
        <!-- <el-card class="contact-info contact-info-mobile">
          <h2>当年今日</h2>
          <div v-if="!historyList.length" class="history-nodata">
            暂未更新今日数据
          </div>
          <div
            v-for="history in historyList"
            :key="history?.id"
            @click="toHistoryDetail(history?.id)"
          >
            <p>{{ history.date }}: {{ history.title }}</p>
          </div>
        </el-card> -->
      </el-col>
      <el-col class="right-col" :xs="0" :sm="6">
        <div class="right-col-side">
          <el-row :align="'top'">
            <el-col>
              <el-card class="introduce-card">
                <img alt="" :src="rightBackgroundUrl" />
                <div>
                  <p class="introduce-title">web技术分享</p>
                  <div class="count-article">
                    <div>
                      <p>文章</p>
                      <span>{{ total }}</span>
                    </div>
                    <div class="pointer" @click="router.push('category')">
                      <p>分类</p>
                      <span>{{
                        categoryNum
                      }}</span>
                    </div>
                    <div class="pointer" @click="router.push('category')">
                      <p>标签</p>
                      <span>{{ tagNum }}</span>
                    </div>
                  </div>
                  <Connect />
                </div>
              </el-card>
              <el-card class="count-monitor">
                <div>
                  <div>网站资讯</div>
                  <div>
                    <div class="count-detail">
                      <span>文章数目：</span>
                      <span>{{ total }}</span>
                    </div>
                    <div class="count-detail">
                      <span>运行时间：</span>
                      <span>{{ runDay }}天</span>
                    </div>
                    <div class="count-detail">
                      <span>访问统计：</span>
                      <span>{{ totalVisit }}</span>
                    </div>
                  </div>
                </div>
              </el-card>
              <el-card style="margin-top: 10px">
                <Tags :tags="tags" @change-select="changeSelect" />
              </el-card>
              <!-- <el-card class="contact-info contact-info-pc">
                <h2>当年今日</h2>
                <div
                  v-if="!historyList.length"
                  class="history-nodata"
                >
                  暂未更新今日数据
                </div>
                <div
                  v-for="history in historyList"
                  :key="history?.id"
                  @click="toHistoryDetail(history?.id)"
                >
                  <p>{{ history.date }}: {{ history.title }}</p>
                </div>
              </el-card> -->
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-dialog v-model="dialogVisible" title="Tips" width="20rem">
    <span>是否删除文章</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteBlog"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import MainHeader from "@/components/MainHeader/index.vue";
import { useRouter } from "vue-router";
import Pagination from "@/components/Pagination/index.vue";
import Connect from "@/components/Connect/index.vue";
import Tags from "@/components/Tags/index.vue";
import {
  queryBlogList,
  removeBlog,
} from "@/api/blog";
import { ElNotification } from "element-plus";
import { getDay } from "@/utils/tools";
// import { History } from "@/interface/apis";
import { getVisitCount } from "@/api/visit";
import { Article } from "@/interface/blogs";
import { user, tagCategory } from "@/store";
const { getCategoryList, getTagList } = tagCategory();
const rightBackgroundUrl = new URL("../../assets/my_message_bg.webp", import.meta.url)
  .href;
const { getUserInfo } = user();
const total = ref<number>(0);
const size = ref<number>(5);
const current = ref<number>(1);
const list = ref<Article[]>([]);
let layout = "prev, pager, next";
const router = useRouter();
const tags:any = [
  {
    tagName: "分类",
    tag: getCategoryList(),
  },
  {
    tagName: "标签",
    tag: getTagList(),
  },
]
const categoryNum = ref<number>(getCategoryList().length);
const tagNum = ref<number>(getTagList().length);
const runDay = getDay();
const dialogVisible = ref(false);
const deleteBlogId = ref<number>(0);
// const historyList = ref<History[]>([]);
const totalVisit = ref<number>(0);
const changeSelect = (item: any) => {
  router.push({ path: "/category", query: { id: item.id } });
};
const visitCount = async () => {
  try {
    const res: any = await getVisitCount();
    if (res?.status === 200) {
      totalVisit.value = res?.data || 0;
    }
  } catch (error: any) {
    ElNotification.error({
      title: "Failed",
      message: "出错了：" + error.message,
      offset: 100,
    });
  }
};

// const getAllHistory = async () => {
//   try {
//     const res: any = await getHistoryList();
//     if (res?.status === 200) {
//       historyList.value = res?.data || [];
//     }
//   } catch (error: any) {
//     ElNotification.error({
//       title: "Failed",
//       message: "出错了：" + error.message,
//       offset: 100,
//     });
//   }
// };

// const toHistoryDetail = async (id: number) => {
//   window.open(BaseUrl + "apis/getHistoryDetail/" + id, "_self");
// };
const deleteClick = (id: number) => {
  deleteBlogId.value = id;
  dialogVisible.value = true;
};
const deleteBlog = async () => {
  try {
    const res: any = await removeBlog(deleteBlogId.value);
    if (res?.status === 200) {
      dialogVisible.value = false;
      ElNotification.success({
        title: "Success",
        message: "删除成功",
        offset: 100,
        duration: 1000,
      });
      getList();
    } else {
      dialogVisible.value = false;
      ElNotification.error({
        title: "Failed",
        message: res?.message || "删除失败",
        offset: 100,
        duration: 1000,
      });
    }
  } catch (error: any) {
    dialogVisible.value = false;
    ElNotification.error({
      title: "Failed",
      message: "出错了：" + error?.message || "删除失败",
      offset: 100,
      duration: 1000,
    });
  }
};
const getList = async () => {
  try {
    const res: any = await queryBlogList(current.value, size.value);
    if (res?.status === 200) {
      total.value = res.data.total;
      list.value = res.data.blog;
    } else {
      ElNotification.error({
        title: "Failed",
        message: res?.message || "获取文章列表失败",
        offset: 100,
      });
    }
  } catch (error: any) {
    ElNotification.error({
      title: "Failed",
      message: "出错了：" + error.message,
      offset: 100,
    });
  }
};
const pagination = (page: { current: number; size: number }) => {
  current.value = page.current;
  getList();
};
const toArticalDetail = (article: Article) => {
  router.push({ path: "/blogDetail", query: { id: article.id } });
};
onMounted(async () => {
  await getList();
  // getAllHistory();
  visitCount();
});
</script>
<style lang="scss" scoped>
.main-blog {
  margin: 0 auto;
  .main-blog-row {
    .left-col {
      .article-detail {
        cursor: pointer;
        margin-top: 10px;
        box-shadow: 5px 5px 5px #f5f6f8;
        border: 1px solid #e8e8e8;
        border-radius: 5px;
        img {
          overflow: hidden;
        }
        display: flex;
        .article-detail-left {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
        }
        .article-detail-right {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 0.5rem;
          span {
            font-weight: 400;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
          }
          h1 {
            font-size: 1.5rem;
            font-weight: 800;
            cursor: pointer;
          }
          h1:hover {
            color: $blue;
          }
          p {
            font-size: 1.1rem;
          }
        }
      }
      .article-detail:hover { 
        border: 1px solid #f3b4b4;
        filter: brightness(1.1);
        color: $blue;
      }
    }
    .right-col {
      margin-top: 10px;
      .right-col-side {
        padding: 0;
        .introduce-card {
          .count-article {
            margin: 10px 0;
            @include flex($space-between);
            div {
              display: flex;
              flex-direction: column;
              text-align: center;
            }
            .pointer:hover {
              color: $blue;
            }
          }
          .my-contact-fun {
            margin: 10px auto 0px auto;
            width: 40%;
            display: flex;
            justify-content: space-evenly;
          }
        }
        .count-monitor {
          margin-top: 10px;
          .count-detail {
            font-size: 14px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
.history-nodata {
  height: 10rem;
  @include flex();
  color: gray;
}
.contact-info {
  margin-top: 10px;
  div {
    cursor: pointer;
  }
  div:hover {
    color: #d1246c;
  }
  h2 {
    font-size: 1.2rem;
    font-weight: bold;
  }
}
.mobile-introduce {
  .count-classify {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      display: flex;
      flex-direction: column;
      text-align: center;
      p {
        font-weight: 300;
      }
      span {
        font-weight: 900;
      }
    }
  }
}
.pointer {
  cursor: pointer;
  p {
    font-weight: 300;
  }
  span {
    font-weight: 900;
  }
}
.introduce-title {
  font-size: 1rem;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  padding: 10px 0px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .right-col {
    display: none;
  }
  .article-detail {
    flex-direction: column;
    width: 100%;
    height: 24rem;
    .article-detail-left {
      flex: 1;
    }
    .article-detail-right {
      flex: 1;
    }
  }
  .contact-info-pc {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .main-blog {
    max-width: 1080px;
  }
  .mobile-header {
    display: none;
  }
  .article-detail {
    flex-direction: row;
    height: 14rem;
    .article-detail-left {
      flex: 0.618;
    }
    .article-detail-right {
      flex: 1;
    }
  }
  .contact-info-mobile {
    display: none;
  }
}
</style>
